<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form method="post" action="#">
	<table>
		<tr>
			<td>用户名</td>
			<td><input type="text" name="username" onblur="checkusername(this)"/></td>
			<td><span id="username_msg"></span></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="password"/></td>
			<td></td>
		</tr>
		<tr>
			<td colspan='3'><input type="submit" value="提交" id="sub" onclick="clickme()"/></td>
		</tr>
	</table>
	</form>
</body>
<script type="text/javascript">
	function checkusername(obj){   //刚才不能访问的原因是obj没有传进去
		//创建核心类对象的
		xmlhttp=null;
		if (window.XMLHttpRequest){// code for Firefox, Opera, IE7, etc.
		xmlhttp=new XMLHttpRequest();
		}
		else if (window.ActiveXObject){// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		//编写回调函数
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				if(xmlhttp.responseText==1){
					//可以使用这个用户名
					document.getElementById("username_msg").innerHTML="<font color='green'>很聪明</font>";
					//document.getElementById("sub").disabled=false;
					
				}else{
					document.getElementById("username_msg").innerHTML="<font color='red'>是大白仁</font>";
					document.getElementById("sub").disabled=false;
				}
			}
		}
		
		//open的方法
		xmlhttp.open("get","${pageContext.request.contextPath}/checkUsernameByAjax?username="+obj.value);
		
		//send方法
		xmlhttp.send();
	}
	function clickme(){
		alert("你是大白仁？");
	}
	
</script>
</html>